	<template>
		<view class="container">
			<tito class="tito" title="添加设备" lefticon="left" @clickLeft="clickLeft" />
			<view class="address_info">
				<view class="info_item name">
					<view class="text">设备ID</view>
					<view class="input">
						<input type="text" placeholder="请输入设备ID" v-model="userInfo.code">
						<uni-icons class="icons" type="scan" size="30" @click="getscan"></uni-icons>
					</view>
				</view>
				<view class="info_item name">
					<view class="text">设备密码</view>
					<view class="input">
						<input type="password" placeholder="请输入6位数字" v-model="userInfo.passWord">
					</view>
				</view>
				<view class="info_item address">
					<view class="text">收货地址</view>
					<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :range="range"
						range-key="name" @change="change" :value="indextex">
						<view class="input">
							<input type="text" placeholder="省市/区(县)" v-model="userInfo.addss" :disabled="true"
								@input="InputEvent()">
						</view>
						<view class="location">
							<uni-icons type="right" size="20" color="#B1B2B2"></uni-icons>
						</view>
					</picker>
				</view>
				<view class=" address_detail">
					<view class="text">详细地址</view>
					<view class="textarea">
						<textarea cols="30" rows="10" placeholder="小区、写字楼、门牌号等" v-model="userInfo.address"></textarea>
					</view>
				</view>
			</view>
			<!-- 保存按钮 -->
			<view class="save_btn">
				<button @click="saveAddr">激活</button>
			</view>
		</view>
	</template>

<script>
export default {
	data() {
		return {
			display: false, //隐藏删除收货地址
			userInfo: {
				code: '', //设备编号
				passWord: '', //密码
				addss: "", //所在地区 
				address: '', //详细地址,
				provinceId: "", //省份id
				cityId: "", //城市id
				areaId: "", //区域id
			},
			range: [
				[],
				[]
			], //地址范围
			code: '', //地址id
			isNoArea: false,
			indextex: [0, 0, 0],
		}
	},
	onLoad(ope) {
		this.getAllAddr()
	},
	methods: {
		clickLeft() {
			uni.navigateBack()
		},
		getscan() {
			console.log('扫码');
		},
		async getAllAddr() {
			await this.$request.get(
				"/water-platform-app-api/customer/address/regionList", {
				parentId: 0,
				level: 1,
			}
			).then(async res => {
				console.log(res, 'ress')
				this.range.unshift(res.data)
				await this.$request.get('/water-platform-app-api/customer/address/regionList', {
					parentId: res.data[0].id,
					level: 2,
				}).then(async cityres => {
					this.range.splice(1, 1, cityres.data);
					await this.$request.get(
						'/water-platform-app-api/customer/address/regionList', {
						parentId: cityres.data[0].id,
						level: 3,
					}
					).then(areares => {
						console.log(areares, 'ress')
						this.range.splice(2, 1, areares.data);
					})
				})
			})
		},
		// 有数据触发事件
		InputEvent() {
			this.display = true
		},
		change(e) {
			console.log(e, 'eee')
			console.log(this.range, 'range')
			let province = this.range[0][e.detail.value[0]] ? this.range[0][e.detail.value[0]].name : '';
			let city = this.range[1][e.detail.value[1]] ? this.range[1][e.detail.value[1]].name : '';
			let area = this.range[2][e.detail.value[2]] ? this.range[2][e.detail.value[2]].name : '';
			if (!(province && city && (area || this.isNoArea))) {
				uni.showToast({
					title: '请选择完整的省市区！',
					icon: 'none',
					duration: 2000
				})
			} else {
				if (this.isNoArea) {
					this.userInfo.addss = province + "-" + city + "-" + area
					this.userInfo.provinceId = this.range[0][e.detail.value[0]].id
					this.userInfo.cityId = this.range[1][e.detail.value[1]].id
					this.userInfo.areaId = ''
					this.userInfo.provinceName = province
					this.userInfo.cityName = city
					this.userInfo.areaName = ''
				} else {
					this.userInfo.addss = province + "-" + city + "-" + area
					this.userInfo.provinceId = this.range[0][e.detail.value[0]].id
					this.userInfo.cityId = this.range[1][e.detail.value[1]].id
					this.userInfo.areaId = this.range[2][e.detail.value[2]].id
					this.userInfo.provinceName = province
					this.userInfo.cityName = city
					this.userInfo.areaName = area
				}

			}
		},
		//核心代码，piker中的数据动态生成
		bindMultiPickerColumnChange(e) {
			this.code = this.range[e.detail.column][e.detail.value].id;
			console.log(e, this.code, 9999999999)
			if (e.detail.column == '0') {
				this.$request.get(
					'/water-platform-app-api/customer/address/regionList', {
					parentId: this.code,
					level: 2,
				}
				).then(res => {
					this.indextex.splice(e.detail.column, 1, e.detail.value)
					this.indextex.splice(1, 1, 0)
					this.indextex.splice(2, 1, 0)
					this.range.splice(1, 1, res.data);
					this.$request.get(
						'/water-platform-app-api/customer/address/regionList', {
						parentId: res.data[0].id,
						level: 3,
					}
					).then(cityres => {
						this.range.splice(2, 1, cityres.data);
					})
				})
			} else if (e.detail.column == '1') {
				this.$request.get(
					'/water-platform-app-api/customer/address/regionList', {
					parentId: this.code,
					level: 3,
				}
				).then(res => {
					this.indextex.splice(e.detail.column, 1, e.detail.value)
					this.indextex.splice(2, 1, 0)
					if (res.data.length == 0) {
						this.isNoArea = true
					}
					this.range.splice(2, 1, res.data);
				})
			}

		},
		//激活
		async saveAddr() {
			const {
				code,
				addss,
				address,
			} = this.userInfo
			if (code == '') {
				uni.showToast({
					title: '请输入设备ID',
					icon: 'none'
				})
				return
			}
			if (!addss) {
				uni.showToast({
					title: '请选择省市区',
					icon: 'none'
				})
				return
			}
			if (!address) {
				uni.showToast({
					title: '请输入详细地址',
					icon: 'none'
				})
				return
			}
			console.log(this.userInfo);
			let res = await this.$request.get("/water-platform-app-api/product/product/activate", this.userInfo)
			if (res.code == 0) {
				console.log(res, '----激活----');
				uni.showToast({
					title: "设备激活成功"
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1000)
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.imagess {
	width: 100rpx !important;
	height: 100rpx !important;
}

.container {
	min-height: 100vh;
	background-color: #f6f6f6;

	.address_info {
		border-radius: 16rpx;
		padding: 32rpx 32rpx 18rpx 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin: 30rpx;

		.address {
			position: relative;

			::v-deep .input-value-border {
				height: 72rpx;
				margin-left: 16rpx;
				border: none;
				background-color: #F6F6F6;
				border-radius: 16rpx;

			}

			::v-deep .selected-area {
				padding-left: 16rpx;
			}

			::v-deep .placeholder {

				font-size: 28rpx;
				font-family: PingFang-SC-Regular, PingFang-SC;
				font-weight: 400;
				color: #949494;
			}

			.location {
				width: 22rpx;
				height: 26rpx;
				position: absolute;
				top: 18rpx;
				right: 32rpx;
			}
		}

		.salestype-check {
			display: flex;
			align-items: center;
			margin-bottom: 32rpx;
			font-size: 28rpx;

			.salestype {
				font-family: PingFangSC-Regular, PingFang SC;
				color: #000000;
			}

			.check {
				margin-left: 5%;
			}

			.file-picker {
				width: 160rpx;
				height: 160rpx;
				margin-left: 8%;

			}

			::v-deep .uni-file-picker {
				margin-left: 8% !important;
			}
		}

		.address_detail {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.text {
				font-size: 28rpx;
				color: #2E3033;
			}

			.textarea {
				width: 494rpx;
				height: 150rpx;
				background: #F6F6F6;
				border-radius: 16rpx;
				padding: 16rpx 32rpx;
				box-sizing: border-box;
				margin-left: auto;
				margin-top: 16rpx;
			}

			textarea {
				width: 100%;
				height: 100%;
			}

			::v-deep .uni-textarea-placeholder {
				font-size: 28rpx;
				font-family: PingFang-SC-Regular, PingFang-SC;
				font-weight: 400;
				color: #949494;
			}
		}

		.info_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			margin-bottom: 32rpx;

			.address-name-porn {
				width: 494rpx;
				padding: 16rpx 32rpx;
				box-sizing: border-box;

				.input-name {
					font-size: 28rpx;
					color: #2E3033;
					margin-bottom: 16rpx;
				}

				.text {
					font-size: 24rpx;
					color: #616366;
				}
			}

			.input {
				width: 494rpx;
				height: 80rpx;
				background: #F6F6F6;
				border-radius: 16rpx;
				padding: 16rpx 32rpx;
				box-sizing: border-box;
				position: relative;

				.icons {
					position: absolute;
					right: 24rpx;
					top: 16rpx;
					z-index: 33;
				}

				::v-deep uni-input {
					width: 100%;
					height: 100%;
					font-size: 28rpx;
					font-family: PingFang-SC-Regular, PingFang-SC;
					font-weight: 400;
					color: #000000;
				}

				::v-deep .uni-input-placeholder {
					font-size: 28rpx;
					font-family: PingFang-SC-Regular, PingFang-SC;
					font-weight: 400;
					color: #949494;
				}
			}

			::v-deep .selectselect {
				margin-top: -18rpx;

				.uni-select {
					border: none;
				}

				.uni-stat__select {
					margin-top: -12rpx;
				}
			}
		}

	}

	.set {
		width: 100%;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 32rpx;
		box-sizing: border-box;
		padding: 18rpx 32rpx;

		.set_default {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.text {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
		}

		.del_address {
			font-size: 28rpx;
			font-family: PingFang-SC-Regular, PingFang-SC;
			font-weight: 400;
			color: #EC0000;
		}
	}

	.save_btn {
		width: 622rpx;
		height: 88rpx;
		position: fixed;
		bottom: 98rpx;
		left: 50%;
		transform: translateX(-50%);

		button {
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			background: #2590FA;
			border-radius: 25px;
		}
	}
}
</style>